<template>
    <div>
        <ul id="example-1" style="text-align: left">
            <li v-for="(item,index) in items" :key="item.message">
                {{parentMessage}} - {{index}} - {{item.message}}
            </li>
        </ul>
        <hr/>
        <ul id="example2" style="text-align: left">
            <li v-for="obj in objects" :key="obj">
                {{obj}}
            </li>
        </ul>
        <hr/>
        <ul id="example3" style="text-align: left">
            <li v-for="(value,name,index) in objects" :key="name">
                {{index}}.{{name}} = {{value}}
            </li>
        </ul>
        <hr/>
        <input type="button" @click="pushItem" value="添加新项">
        <input type="button" @click="replaceArray(1)" value="filter数组">
        <input type="button" @click="replaceArray(2)" value="pop数组">
        <input type="button" @click="replaceArray(3)" value="shift数组">
        <input type="button" @click="replaceArray(4)" value="unshift数组">
        <hr/>
        <ul id="example4">
            <li v-for="n in evenNumbers" :key="n">{{n}}</li>
        </ul>
        <ul id="example5" v-for="set in sets" :key="set">
            <li v-for="n in even(set)" :key="n">{{n}}</li>
        </ul>
        <div id="example6">
            <span v-for="n in 5" :key="n">{{n}}</span>
        </div>
        <div id="example7">
            <div v-for="(item,index) in items" :key="item.message">
                <template>
                    <li>{{item.message}}</li>
                    <li>{{index}}---{{item.message}}</li>
                </template>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({})
export default class ListRenderingExample extends Vue {
    name = '';
    parentMessage = "parent";
    items:any[] = [{message:"Foo"},{message:"Bar"},{message:"Baz"},{message:"John"}];
    objects = {
        title:"How to do lists in Vue",
        author:"Jane doe",
        publishAt:"2021-01-10"
    }
    pushItem(){
        this.items.push({message:"Baz"});
    }
    replaceArray(number:number){
        if(number == 1){
            this.items = this.items.filter(item =>{
                return item.message.match(/Foo/);
            })
        }
        if(number == 2){
            let newVal = this.items.pop();
            this.items = [newVal];
        }
        if(number == 3){
            let newVal = this.items.shift();
            this.items = [newVal];
        }
        if(number == 4){
            this.items.unshift({message:"Connor"});
        }
    }
    numbers = [1,2,3,4,5];
    get evenNumbers():number[]{
        return this.numbers.filter((number:number) =>{
            return number % 2 === 0;
        })
    }

    sets = [[1,2,3,4,5],[6,7,8,9,10]];
    even(numbers:number[]){
        return numbers.filter((number:number) => {
            return number % 2 === 0;
        })
    }
}
</script>

<style scoped>
ul{
    text-align: left;
}
</style>
